body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #494949; }
label { font-weight: normal; }
li { list-style: none; }


.mart-15px { margin-top: 15px; }
.martb-50px { margin: 80px 0px 30px 0px; }
.marb-15px { margin-bottom: 15px; }

.wh_30 { width: 38%; }

input, textarea, select { border-radius: 0!important;  -webkit-border-radius: 0!important; box-shadow: none!important; -webkit-box-shadow: 0!important;  }


.mar-50 { margin-bottom: 50px; }

/******* LOGIN BOX START ********/
/*.login-bg { height:100%; background: url(../Images/MainPage/login-bg.png) no-repeat  center bottom; background-size: cover; } commented by designer*/
.login-bg { /*overflow: hidden;*/
    background: url(../Images/MainPage/login-bg-new.PNG) center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.wrapperCntr { width: 100%; height: 100%; display: table; box-sizing: border-box}
.wrapperinner{ border: 1px solid rgba(255,255,255,1.00);padding:8% 0% 1% 0%; margin:3% 1% 0% 1%; box-sizing: border-box}
.wrapperinner a{ color: #ffffff}
.wrapperinner a:hover img{  transform: scale(1.1, 1.1); transition:all 1s  ease-in-out}
.wrapperinner span{color:#ffffff; display: block; padding:20px 0px 0px 0px}
.heightwrapperCntr{ height: 88%}


.login-header { border-bottom: 2px solid #8a1a9c; text-align: center}


.login-header .welcome{color:#ffdd00; pading:5px 0px 0px 10px; font-weight: bold}
.login-header .toplink { padding:20px 0px 0px 0px 0px}
.login-header .toplink a{color:#ffffff; pading:5px 0px 0px 10px; font-weight: bold; padding:0px 10px 0px 10px; border-right:2px solid #65226d; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}

.login-header .toplink a:last-child{ border: none; padding-right:0px}
 .bordernone{border-bottom:none}
.login-header .navbar-header { margin-top: 25px;  }


.login-header span { margin-top: 2px; margin-bottom:2px;  }

.login-header .headertext{color:#e92076; font-size: 23px;   width: 300px;  box-sizing: border-box; margin-top:10px; line-height: 100px }
.broderright{border-right:1px dotted rgba(255,255,255,1.00)}
/* Change the white to any color ;) */
.loginBox .form-bottom input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f7941e inset; -webkit-text-fill-color: #000; }
.loginBoxcontiner { width: 430px; margin-top: 20px; margin-bottom: 40px; margin-right: 25px; float: right; }
.loginBox { width: 340px; margin-top: 64px; margin-bottom: 40px; margin:0 auto;  background: #f3f3f3; }
.loginBox .form-top { padding: 0 20px 0 20px; -webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.loginBox .form-top h2 { margin: 0; font-size: 36px; line-height: 24px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; line-height: 22px; color: #8a1a9c; padding-top: 27px; text-align: center; }
.loginBox .form-top p { font-family: arial; font-size: 13px; font-weight: normal; color: #8c8c8c; text-align: center; position: relative; padding: 15px 0 5px 0; margin: 0; }
.loginBox .form-top p:after { width: 48px; height: 5px; content: ''; background: #8a1a9c; position: absolute; top: 40px; left: 0; right: 0; margin: auto; }
.loginBox .form-top p:before { width: 40px; height: 5px; content: ''; background: rgba(177,80,228,.5); position: absolute; top: 43px; left: 0; right: 0; margin: auto; }
.loginBox .form-bottom { padding: 20px; -webkit-box-shadow: 0px 45px 44px -31px rgba(0,0,0,0.75); -moz-box-shadow: 0px 45px 44px -31px rgba(0,0,0,0.75); box-shadow: 0px 45px 44px -31px rgba(0,0,0,0.75); -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }
.loginBox .form-bottom label { font-family: arial; font-size: 13px; font-weight: normal; color: #3a3a3a; }
.loginBox .form-bottom b { font-family: arial; font-size: 13px; font-weight: normal; color: #626262; }
.loginBox .form-bottom b a { font-family: arial; font-size: 13px; font-weight: normal; color: #3a3a3a; text-decoration: underline }
.loginBox .form-bottom b a:hover { text-decoration: none; }
.loginBox .form-bottom input[type='text']:focus, 
.loginBox .form-bottom input[type='password']:focus { box-shadow: none; }
.loginBox .form-bottom input[type='text'], 
.loginBox .form-bottom input[type='password'] { box-shadow: none;/* height: 30px; background: none; border: none; border-bottom: 1px solid #c2c2fd;  font-family: arial; font-size: 13px; font-weight: normal; color: #fff; */
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shdow: 0; }
.loginBox .form-bottom select { float: right; height: 30px; background: none; border: 1px solid #fcd8ae; font-family: arial; font-size: 14px; font-weight: normal;  
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; box-shdow: 0; }
.loginBox .form-bottom button[type='submit'] { width: 113px; height: 55px; background: #40b4e4; text-transform: uppercase; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-shadow: 0px 0px 5px #969696; -webkit-text-shadow: 0px 0px 5px #969696; }

.loginBox .form-bottom .form-group:nth-child(3) { margin-bottom: 5px; }
.loginBox .form-bottom .form-group:nth-child(4) { width: 100%; margin-bottom: 10px; display: inline-block; }

.loginBox .form-bottom .emailbox { font-family: arial; font-size: 12px; font-weight: normal; color: #fff; } 
.loginBox .form-bottom .emailbox a { color: #fff; text-decoration: underline; }
.loginBox .form-bottom .emailbox a:hover { text-decoration: none;  }
.loginBox .form-bottom .btn-defaultLogin { width: 113px; /*height: 55px;*/ background: #8a1a9c; text-transform: uppercase; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-shadow: 0px 0px 5px #969696; -webkit-text-shadow: 0px 0px 5px #969696; }



.container.active .card:first-child { background: #f2f2f2; margin: 0 15px; }
.container.active .card:nth-child(2) { background: #fafafa; margin: 0 10px; }

/* Card */
.card { position: relative; padding: 60px 0 40px 0; box-sizing: border-box; -webkit-transition: .3s ease; transition: .3s ease; }
.card:first-child { background: #fafafa; height: 10px; border-radius: 5px 5px 0 0; margin: 0 10px; padding: 0; }
.card .input-container { position: relative; margin: 0 0 15px 0; }
.card .input-container input { outline: none; z-index: 1; position: relative; font-family: Arial, Helvetica, sans-serif; background: none; width: 100%; height: 50px; border: 0; color: #3a3a3a; font-size: 18px; font-weight: 400; }
.card .input-container input:focus ~ label { color: #3a3a3a; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); }
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after { width: 50%; }
.card .input-container input:valid ~ label { color: #f5f5c9; -webkit-transform: translate(-12%, -50%) scale(0.75); transform: translate(-12%, -50%) scale(0.75); }
.card .input-container label { position: absolute; top: 0; left: 0; font-family: arial; color: #3a3a3a; font-size: 13px; font-weight: normal; line-height: 60px; text-transform: uppercase; -webkit-transition: 0.2s ease; transition: 0.2s ease; }
.card .input-container .bar { position: absolute; left: 0; bottom: 0; background: #c0c0c0; width: 100%; height: 1px; }
.card .input-container .bar:before, .card .input-container .bar:after { content: ''; position: absolute; background: #c0c0c0; width: 0; height: 2px; -webkit-transition: .2s ease; transition: .2s ease; }
.card .input-container .bar:before { left: 50%; }
.card .input-container .bar:after { right: 50%; }


.captchabox {  }
.captchabox #codeRefresh { float: left; }
.captchabox #codeRefresh img { width: 125px; height: 40px; float: left;  }
.captchabox a {  font-size: 18px; margin-top: 12px; margin-left: 5%; display: inline-block; cursor: pointer; }

/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
  0% {
    bottom: 30px;
    opacity: 0;
  }
}
@keyframes buttonFadeInUp {
  0% {
    bottom: 30px;
    opacity: 0;
  }
}

/******* LOGIN BOX END ********/

.login-linebox { width: 775px; /*height: 511px;*/ float: left; padding: 0 0 0 0; position: absolute; left: 0; left: 3%;  margin: auto; }
.login-linebox nav a{  display: block; float: left; margin: 0% 6.4% 0% 0%}
.loginbackground {  background: url(../images/MainPage/for-images.png) no-repeat bottom; margin: auto;  height:  }
.login-linebox img { }



/** GREEN RIPPLE **/
.green-ripple { width: 10px; position: absolute; display: block; left: 13%; top: 65px; }
.green-ripple .greentooltip { position: absolute; left: -45px; float: left; top: -50px; background: rgba(161,198,32,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.green-ripple .greentooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(161,198,32,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.circle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #a1c620;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** ORANGE RIPPLE **/
.orange-ripple { width: 10px; position: absolute; display: block; left: 266px; top: 75px; }
.orange-ripple .bluetooltip { position: absolute; left: -65px; float: left; top: 36px; background: rgba(243,145,0,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.orange-ripple .bluetooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(243,145,0,.8); position: absolute; left: 0; right: 0; margin: auto; top: -10px; content: ''; }
.orangcircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #f39100;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }


/** BLUE RIPPLE **/
.blue-ripple { width: 10px; position: absolute; display: block; left: 356px; top: 230px; }
.blue-ripple .bluetooltip { position: absolute; left: -66px; float: left; top: -50px; background: rgba(0,206,255,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.blue-ripple .bluetooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,206,255,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.bluecircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #00ceff;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** RED RIPPLE **/
.red-ripple { width: 10px; position: absolute; display: block; left: 452px; top: 325px; }
.red-ripple .redtooltip { position: absolute; left: -50px; float: left; top: -50px; background: rgba(228,0,69,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family:  Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.red-ripple .redtooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(228,0,69,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.redcircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #e40045;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** YELLOW RIPPLE **/
.yellow-ripple { width: 10px; position: absolute; display: block; left: 607px; top: 258px; }
.yellow-ripple .yellowtooltip { position: absolute; left: -57px; float: left; top: 36px; background: rgba(255,221,0,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.yellow-ripple .yellowtooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(255,221,0,.8); position: absolute; left: 0; right: 0; margin: auto; top: -10px; content: ''; }
.yellowcircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #ffdd00;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }


/** AQUA RIPPLE **/
.aqua-ripple { width: 10px; position: absolute; display: block; left: 697px; top: 233px; }
.aqua-ripple .aquatooltip { position: absolute; left: -83px; float: left; top: -55px; background: rgba(243,145,0,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.aqua-ripple .aquatooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(243,145,0,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.aquacircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #f39100;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** PURPLE RIPPLE **/
.purple-ripple { width: 10px; position: absolute; display: block; left: 84%; top: 85px; }
.purple-ripple .purpletooltip { position: absolute; left: -66px; float: left; top: -55px; background: rgba(0,206,255,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.purple-ripple .purpletooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,206,255,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.purplecircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #00ceff;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** BROWN RIPPLE **/
.brown-ripple { width: 10px; position: absolute; display: block; left: 63%; top: 141px; }
.brown-ripple .browntooltip { position: absolute; left: -59px; float: left; top: -55px; background: rgba(198,100,55,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.brown-ripple .browntooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(198,100,55,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.browncircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #c66437;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

/** PINK RIPPLE **/
.pink-ripple { width: 10px; position: absolute; display: block; left: 63.6%; top: 386px; }
.pink-ripple .pinktooltip { position: absolute; left: -45px; float: left; top: -55px; background: rgba(129,167,33,.8); white-space: nowrap; padding: 5px 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #fff; -webkit-border-radius: 20px;
-moz-border-radius: 20px; border-radius: 20px; }
.pink-ripple .pinktooltip:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(129,167,33,.8); position: absolute; left: 0; right: 0; margin: auto; top: 27px; content: ''; }
.pinkcircle { width: 10px; height: 10px; display: block; border-radius: 50%; background: #81a721;-webkit-transition: 5s ease; transition: 5s ease; position: absolute; top: 0px; }

.green-ripple .delay1, .orange-ripple .delay1, .blue-ripple .delay1,
.red-ripple .delay1, .yellow-ripple .delay1, .aqua-ripple .delay1,
.purple-ripple .delay1, .brown-ripple .delay1, .pink-ripple .delay1 { -webkit-animation: waves 2.5s infinite; animation: waves 2.5s infinite; -webkit-animation-delay: .1s; animation-delay: .1s; }
.green-ripple .delay2, .orange-ripple .delay2 .blue-ripple .delay2,
.red-ripple .delay2, .yellow-ripple .delay2, .aqua-ripple .delay2,
.purple-ripple .delay2, .brown-ripple .delay2, .pink-ripple .delay2 {  -webkit-animation: waves 2.5s infinite 0.7s forwards; animation: waves 2.5s infinite 0.7s forwards; }
.green-ripple .delay3, .orange-ripple .delay3, .blue-ripple .delay3,
.red-ripple .delay3, .yellow-ripple .delay3, .aqua-ripple .delay3,
.purple-ripple .delay3, .brown-ripple .delay3, .pink-ripple .delay3 { -webkit-animation: waves 2.5s infinite 1.3s forwards; animation: waves 2.5s infinite 1.3s forwards; }
.green-ripple .delay4, .orange-ripple .delay4, .blue-ripple .delay4,
.red-ripple .delay4, .yellow-ripple .delay4, .aqua-ripple .delay4,
.purple-ripple .delay4, .brown-ripple .delay4, .pink-ripple .delay4 {  -webkit-animation: waves 2.5s infinite 1.9s forwards; animation: waves 2.5s infinite 1.9s forwards; }






@-webkit-keyframes waves {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(4);
            transform: scale(4);
    opacity: 0;
  }
}
@-webkit-keyframes bloop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes bloop {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}









.footerBox-main {
    bottom: 0;
    width: 100%;
    position: fixed;
    left:0;
}
.footerBox { width: 100%; background: #3c053c; position: absolute; margin: 0 0 0 0; text-align: center; font-size: 12px; color: #c6c6c6; font-weight: normal; line-height: 34px; text-align: center; bottom: 0; }

.backgroundnone{background: none;}

.footerBox  span { font-size: 12px; color: #c6c6c6; font-weight: normal; line-height: 34px; text-align: center; padding: 0 10px }


/*@media (max-width: 480px) {

.login-header .navbar-header { margin-left: auto; }
.login-bg { height: auto; }
.loginBox { width: 90%; margin-left: auto; margin-right: auto; margin-top: 30px; float: none;  }
.login-linebox { display: none;   }

}

@media (min-width: 480px) and (max-width: 640px) {

.login-header .navbar-header { margin-left: auto; }
.login-bg { height: auto; }
.loginBox { width: 90%; margin-left: auto; margin-right: auto;  float: none; margin-top: 30px;  }
.login-linebox { display: none;   }


}

@media (min-width: 667px) and (max-width: 1024px) {

.login-header .navbar-header { margin-left: auto; }
.login-bg { height: auto; }
.loginBox { width: 55%; margin-left: auto; margin-right: auto;  float: none; margin-top: 30px;  }
.login-linebox { display: none;   }


}
@media (min-width: 1024px) and (max-width: 1025px) {


}*/


@media (max-width: 480px) {

html, body { height: auto; }

.login-header .navbar-header { margin-left: 0; }
    .login-header .navbar-header img {
       display:none;
    }
.login-bg { height: auto; }
	.loginBoxcontiner { width: 90%; margin-left: auto; margin-right: auto; margin-top: 30px; float: none;  }
	
.loginBox { width: 90%; margin-left: auto; margin-right: auto; margin-top: 30px; float:right;  }

    .text-right {
        text-align: center !important;
    }
    .login-linebox {
        display: none;
    }
.captchabox #codeRefresh img { width: 107px; }

    .footerBox {
        display: table;
        line-height: normal;
        padding: 10px;
        font-size: 11px;
        margin-top: 0;
        position: relative;
        bottom: 0;
    }
    .footerBox span { width: 100%; line-height: normal; }
                

}
.footerBoxinner {  color: #FFFFFF;padding: 10px;}


@media (min-width: 480px) and (max-width:640px) {

    html, body {
        height: auto;
    }

    .login-header .navbar-header {
        margin-left: 0;
    }
    .text-right {
        text-align: center !important;
    }
    .login-bg {
        height: auto;
    }

    .loginBox {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        float: none;
    }

    .login-linebox {
        display: none;
    }

    .hrms-logo {
        display: none;
    }


.captchabox #codeRefresh img { width: 107px; }
	.loginbackground{background-image:none}
    .footerBox {
        display: table;
        line-height: normal;
        padding: 10px;
        font-size: 11px;
        margin-top: 0;
        position: relative;
        bottom: 0;
    }
.footerBox span { width: 100%; line-height: normal; }
                

}

@media (min-width: 641px) and (max-width:736px){

html, body { height: auto; }

.login-header .navbar-header { margin-left: 0; }
.login-bg { height: auto; }
.loginBox { width: 50%; margin-left: auto; margin-right: auto; margin-top: 30px; float: none;  }
.login-linebox { display: none;   }
    .text-right {
        text-align: center !important;
    }
.captchabox #codeRefresh img { width: 107px; }

    .footerBox {
        display: table;
        line-height: normal;
        padding: 10px;
        font-size: 11px;
        margin-top: 0;
        position: relative;
        bottom: 0;
    }
.footerBox span { width: 100%; line-height: normal; }
                

}
@media (min-width: 737px) and (max-width:1024px){



.login-header .navbar-header { margin-left: 0; }
    .text-right {
        text-align: center !important;
    }
    .loginBox {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        float: none;
        position: relative;
        bottom: 0;
    }
.login-linebox { display: none;   }
	
.captchabox #codeRefresh img { width: 107px; }



}

/*@media (min-width: 1024px) and (max-width:1366px) {

.hrms-logo img{width:200px; height:100px}

}*/


/*CheckBox*/

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: context-menu;
}

/* Hide the browser's default checkbox */
    /*.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;

}*/

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  background-color: White;
  border:solid 1px #9c27b0;
   /*border-radius: 20%*/
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: white;
  border:solid 1px #9c27b0
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #9c27b0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hrms-logo-new {
    position: absolute;
    top: 5px;
    right: 100px;
    width:350px;
}
.ah-tp-hdr {
    color: white;
    background-color: rgba(116, 66, 122, 1);
    font-family: Arial,sans-serif !important;
    font-size:1em !important;
}
.ah-tp-bdy {
    font-family: Arial,sans-serif !important;
    font-size: 1em !important;
}
.ad-tp-hdr {
    color: white;
    background-color: #304780;
    font-family: Arial,sans-serif !important;
    font-size: 1em !important;
}
.icon-purple {
   color:#780096 !important;
}
.hoverPopUp {
    display: none;
    position: absolute;
    z-index: 999999;
    text-align: left;
    max-width: 550px;
    height: auto;
    padding: 10px;
    line-height: 25px;
    background: #eeeeee;
    color: #000000;
    border: 1px solid #8a8a8a;
    font-size: 90%;
    overflow: scroll !important;
    -webkit-box-shadow: -1px 1px 6px 1px rgba(138,138,138,1);
    -moz-box-shadow: -1px 1px 6px 1px rgba(138,138,138,1);
    box-shadow: -1px 1px 6px 1px rgba(138,138,138,1);
}
.errordiv {
    width: 50%;
    margin: auto;
    margin-top: 30px;
    color: red;
    text-align: center;
    letter-spacing: 1px
}
/*Added by Aman*/
.iconPosition {
    position: relative;
    left: 89px;
}
.col-md-4.text-right {
    text-align: right;
}